<template>
  <div>
    <SearchBar inline>
      <template #normal>
        <el-form-item label="发件人昵称">
          <el-input
            v-model="tableForm.name"
            clearable
            placeholder="请输入发件人昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="发件人邮箱">
          <el-input
            v-model="tableForm.senderMailAddr"
            clearable
            placeholder="请输入搜索关键词"
          ></el-input>
        </el-form-item>

        <el-form-item class="">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </template>
    </SearchBar>
    <div class="_content_list">
      <div class="clueList">
        <!-- <div class="clueList-title">发件人列表</div> -->
        <div class="fr">
          <el-button type="primary" @click="isAdd = true">新建</el-button>
        </div>
        <div class="clear-both"></div>
      </div>
      <LayoutTable
        ref="ListTable"
        url="/reach/emailSenderInfoEntity/pageList"
        disable-auto-height
        :param="tableForm"
      >
        <el-table-column
          prop="nickName"
          label="发件人昵称"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="senderMailAddr"
          label="发件人邮箱"
          min-width="150"
        ></el-table-column>
        <el-table-column prop="isDefault" label="默认发件人" min-width="150">
          <template #default="scope">
            <el-switch
              :value="scope.row.isDefault"
              @click.left="setDefault(scope.row)"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" min-width="150">
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="name"
          label="创建人"
          min-width="150"
        ></el-table-column> -->
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div>
              <el-button link type="primary" @click="toEditor(scope.row)">
                编辑
              </el-button>
              <el-button @click="del(scope.row)" link type="primary">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </div>
    <add-sender
      @confirmAdd="confirmAdd"
      @cancelAdd="cancelAdd"
      :addData="addData"
      :isAdd="isAdd"
    ></add-sender>
  </div>
</template>
<script>
import reachPipelineApi from "@/api/reachPipelineApi";
import addSender from "./addSender.vue";
export default {
  components: { addSender },
  data() {
    return {
      isAdd: false,
      typeFilters: {},
      addData: { id: null },
      tableForm: {
        name: "",
        senderMailAddr: "",
      },
    };
  },
  methods: {
    toEditor(row) {
      this.isAdd = true;
      this.addData = JSON.parse(JSON.stringify(row));
    },
    confirmAdd() {
      this.cancelAdd();
      this.onSearch();
    },
    cancelAdd() {
      this.isAdd = false;
      this.addData = { id: null };
    },
    // 删除发件人
    async delEmailSender(row) {
      let rs = await reachPipelineApi.delEmailSender({ id: row.id });
      if (rs.code === 200) {
        ElMessage.success("删除成功");
        this.onSearch();
      }
    },
    // 设置默认发件人
    async setDefault(row) {
      let rs = await reachPipelineApi.setDefault({ id: row.id });
      if (rs.code === 200) {
        // ElMessage.success("删除成功");
        this.onSearch();
      }
    },
    del(row) {
      ElMessageBox.confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delEmailSender(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.ListTable.search();
      });
    },
    resetForm() {
      this.tableForm = {
        name: "",
        senderMailAddr: "",
      };
      this.onSearch();
    },
  },
};
</script>
<style lang="scss" scoped>
.clueList {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #2c313b;
  &-title {
    display: inline-block;
    span {
      font-weight: normal;
      font-size: 14px;
      margin-left: 10px;
      i {
        color: #6178ff;
        font-style: initial;
        margin: 3px;
      }
    }
  }
}
._content_list {
  background: #fff;
  padding: 16px 24px;
}
</style>